import React, { useEffect, useState } from 'react'
import { Button, Checkbox, Form, Input, Select, Space } from 'antd';
import { DownOutlined, UpOutlined } from '@ant-design/icons';

type Props = {
    getSeaData:any
    resetting:any
}

const ApplySearch = (props: Props) => {
    const [isIdCard, setIsIdCard] = useState(false)
    const [isWidth, setIsWidth] = useState('20%')
    const [isTitle, setIsTitle] = useState('展开')

    useEffect(() => {
    }, [])

    const onFinish = (values: any) => {
        console.log('Success:', values);
        props.getSeaData(values)
    };

    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };

    //控制展开收缩
    const domBtn = () => {
        if (isIdCard) {
            setIsIdCard(false)
            setIsWidth('20%')
            setIsTitle('展开')
        } else {
            setIsIdCard(true)
            setIsWidth('30%')
            setIsTitle('收缩')
        }
    }

    const handleChange = (value: string) => {
        console.log(`selected ${value}`);
      };

    //重置
    const  resetBtn =() => {
        props.resetting()
    }

    return (
        <div>
            <Form
                name="basic"
                style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', margin: '0 50px' }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >

                <Form.Item
                    label="商铺名称"
                    name="shopName"
                    style={{ width: isWidth }}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="申请人姓名"
                    name="managerName"
                    style={{ width: isWidth }}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="申请人身份证号"
                    name="idCard"
                    style={{ width: isWidth }}
                >
                    <Input />
                </Form.Item>

                {
                    isIdCard ? <Form.Item
                        label="审核状态"
                        name="status"
                        style={{ width: '30%' }}
                    >
                        <Select
                            onChange={handleChange}
                            allowClear
                            options={[
                                { value: '同意', label: '同意' },
                                { value: '拒绝', label: '拒绝' },
                                { value: '审核中', label: '审核中' },
                            ]}
                        />
                    </Form.Item> : null
                }


                <Form.Item style={{ width: '220px' }}>
                    <Button type="primary" htmlType="submit" style={{ marginRight: '10px' }}>
                        查询
                    </Button>
                    <Button htmlType="button" style={{ marginRight: '20px' }} onClick={resetBtn}>
                        重置
                    </Button>
                    <a href="#" onClick={domBtn}>{isIdCard ? <UpOutlined /> : <DownOutlined />}   {isTitle}</a>
                </Form.Item>
            </Form>
        </div>
    )
}

export default ApplySearch